<template>
  <div>
    <el-form :inline="true" :model="stockqueryForm" ref="stockqueryForm">
      <div class="pc-page-header">
        <el-form-item>
          <el-input v-model="stockqueryForm.instoreNo"  clearable class="pc-input3-col6" placeholder="输入入库编号"></el-input>
        </el-form-item>
          <el-form-item style="margin-left: -6px">
          <el-select  v-model="stockqueryForm.storageId" v-if="this.roleType!=='isStorage' "  filterable clearable  remote reserve-keyword   placeholder="选择仓库" class="pc-input3-col6" value=""  :remote-method="searchStorage" @focus="searchStorage()">
            <el-option v-for="item in storageList" :key="item.value" :label="item.label" :value="item.value"  ></el-option>
          </el-select>
          </el-form-item>
         <el-form-item style="margin-left: -6px">
           <el-date-picker class="block"
                            v-model="stockqueryForm.instoreDate"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="入库开始日期"
                            end-placeholder="入库结束日期"
                            value-format="yyyy-MM-dd"
                            @change="getDate">
           </el-date-picker>
         </el-form-item>
        <el-form-item  v-if="this.roleType!=='isOwner'&&isshowMore">
          <!--   <el-input v-model="stockqueryForm.storageName"  clearable class="pc-input3-col5" placeholder="仓库"></el-input> -->
          <el-input v-model="stockqueryForm.ownerName"  clearable class="pc-input3-col6" placeholder="输入存货人"></el-input>

        </el-form-item>
        <el-form-item v-if="isshowMore" style="margin-left: -6px">
          <el-input v-model="cntrNoString"  clearable class="pc-input3-col6" placeholder="多个柜号用','隔开"></el-input>
        </el-form-item>
        <el-form-item v-if="isshowMore" style="margin-left: -6px">
          <el-input v-model="stockqueryForm.goodsName"  clearable class="pc-input3-col6" placeholder="输入货物名称"></el-input>
        </el-form-item>
        <el-form-item v-if="isshowMore" class="date-range-fix">
          <el-date-picker
            v-model="stockqueryForm.startProductDate"
            type="month"
            class="pc-input3-col5"
            value-format="yyyy-MM-01"
            placeholder="生产开始日期">
          </el-date-picker>
          <span class="span-range"></span>
          <el-date-picker
            v-model="stockqueryForm.endProductDate"
            type="month"
            class="pc-input3-col5"
            value-format="yyyy-MM-01"
            placeholder="生产结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('stockqueryForm')">刷新</el-button>
          <el-button type="primary" @click="exportData()" v-permission="['wms:dataquery:instorehistory:export']">导出</el-button>
          <el-button @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>

    <egrid  v-if="this.roleType==='isAdmin' "  border  class="page-list"
            :data="tableData"
            :columns="columnsAdmin"
            :columns-schema="columnsSchema"
            :columns-props="columnsProps"
            :columns-handler="columnsHandler">
    </egrid>
    <egrid  v-if="this.roleType==='isOwner' " border  class="page-list"
            :data="tableData"
            :columns="columnsOwner"
            :columns-schema="columnsSchema"
            :columns-props="columnsProps"
            :columns-handler="columnsHandler">
    </egrid>
    <egrid   v-if=" this.roleType==='isStorage'" border  class="page-list"
            :data="tableData"
            :columns="columnsStorage"
            :columns-schema="columnsSchema"
            :columns-props="columnsProps"
            :columns-handler="columnsHandler">
    </egrid>


    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryInstoreList"  :queryData="stockqueryForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

  </div>
</template>

<script>
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';

  import PcDialog from 'components/dialog';
  import { Notification } from 'element-ui';
  export default {
    data () {
      return {
        isshowMore: false,
        cntrNoString: '',
        showMoreText: '更多',
        roleType: 0, // 1超级管理员 2云仓 3 货主企业
        stockqueryForm: {
          cntrNo: [],
          instoreNo: '',
          instoreDate: null,
          productDate: null,
          goodsName: '',
          ownerName: '',
          storageId: '',
          startInstoreDate: null,
          endInstoreDate: null,
          startProductDate: null,
          endProductDate: null
        },
        tableData: [],
        storageList: [],
        columnsAdmin: [
          {
            label: '入库编号',
            prop: 'instoreNo'
          },
          {
            label: '仓库',
            prop: 'storageName'
          },
          {
            label: '入库日期',
            prop: 'instoreDateDisplay'
          },
          {
            label: '存货人',
            prop: 'ownerName'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '生产厂家',
            prop: 'vendor'
          },
          {
            label: '原产地',
            prop: 'countryOrigin'
          },
          {
            label: '生产日期',
            prop: 'productDateDisplay'
          },
          {
            label: '计划入库数量',
            prop: 'planCount'
          },
          {
            label: '实际入库数量',
            prop: 'actCount'
          },
          {
            label: '单位',
            prop: 'unitDisplay'
          },
          {
            label: '入库重量(kg)',
            prop: 'actWeight'

          }
        ],
        columnsOwner: [
          {
            label: '入库编号',
            prop: 'instoreNo'
          },
          {
            label: '仓库',
            prop: 'storageName'
          },
          {
            label: '入库日期',
            prop: 'instoreDateDisplay'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '生产厂家',
            prop: 'vendor'
          },
          {
            label: '原产地',
            prop: 'countryOrigin'
          },
          {
            label: '生产日期',
            prop: 'productDateDisplay'
          },
          {
            label: '计划入库数量',
            prop: 'planCount'
          },
          {
            label: '实际入库数量',
            prop: 'actCount'
          },
          {
            label: '单位',
            prop: 'unitDisplay'
          },
          {
            label: '入库重量(kg)',
            prop: 'actWeight'

          }
        ],
        columnsStorage: [
          {
            label: '入库编号',
            prop: 'instoreNo'
          },
          {
            label: '入库日期',
            prop: 'instoreDateDisplay'
          },
          {
            label: '存货人',
            prop: 'ownerName'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '生产厂家',
            prop: 'vendor'
          },
          {
            label: '原产地',
            prop: 'countryOrigin'
          },
          {
            label: '生产日期',
            prop: 'productDateDisplay'
          },
          {
            label: '计划入库数量',
            prop: 'planCount'
          },
          {
            label: '实际入库数量',
            prop: 'actCount'
          },
          {
            label: '单位',
            prop: 'unitDisplay'
          },
          {
            label: '入库重量(kg)',
            prop: 'actWeight'

          }
        ],
        columnsSchema: {
          '入库编号': { minWidth: 150 },
          '仓库': { minWidth: 150 },
          '入库日期': { minWidth: 100 },
          '存货人': { minWidth: 150 },
          '柜号': { minWidth: 135 },
          '生产厂家': { minWidth: 120 },
          '货物名称': { minWidth: 225 },
          '原产地': { minWidth: 120 },
          '生产日期': { minWidth: 100 },
          '单位': { minWidth: 80 }
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 120,
          showOverflowTooltip: true
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          // url  /instore/listInstore
          queryInstoreList: '/maliwms/instore/listInstoreHistory'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Notification
    },
    created () {
//      let that = this;
      let roleNun;
      roleNun = parseInt(this.$store.getters.getRoleId);
      if (roleNun === 1 || roleNun === 2) {
        this.roleType = 'isAdmin';   // 管理员
      } else if (roleNun === 3 || roleNun === 4) {
        this.roleType = 'isOwner';     // 货主
      } else if (roleNun === 6) {
        this.roleType = 'isStorage';  // 仓库
      } else {
        this.roleType = false;
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        this.ajax({
          url: '/maliwms/storage/listStorage',
          type: 'POST',
          data: {},
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.allStorages = res.result.list;
            this.list = this.allStorages.map(item => {
              return {value: item.id, label: item.storageName};
            });
          }
        });
      },
      searchStorage (query) {
        if (query !== '' && query !== undefined) {
          setTimeout(() => {
            this.storageList = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.storageList = this.list.filter(item => {
            return item.label.toLowerCase();
          });
        }
      },
      getDate() {
        if (this.stockqueryForm.instoreDate === null) {
          this.stockqueryForm.startInstoreDate = '';
          this.stockqueryForm.endInstoreDate = '';
        } else {
          this.stockqueryForm.startInstoreDate = this.stockqueryForm.instoreDate[0];
          this.stockqueryForm.endInstoreDate = this.stockqueryForm.instoreDate[1];
        }
      },
      getProductDate() {
        if (this.stockqueryForm.productDate === null) {
          this.stockqueryForm.startProductDate = '';
          this.stockqueryForm.endProductDate = '';
        } else {
          this.stockqueryForm.startProductDate = this.stockqueryForm.productDate[0];
          this.stockqueryForm.endProductDate = this.stockqueryForm.productDate[1];
        }
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      // 表头样式
      getHeaderStyle({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      propsHandler: function ({ row, col, column }) {
        return {row, col, column};
      },
      showMore () {
        this.isshowMore = !this.isshowMore;
        if (this.isshowMore) {
          this.showMoreText = '收起';
        } else {
          this.showMoreText = '更多';
        }
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      queryDataFn () {
        if (this.cntrNoString == '' || this.cntrNoString == null || this.cntrNoString == undefined) { //eslint-disable-line
          this.cntrNoString = '';
          this.stockqueryForm.cntrNo = [];
        } else {
          this.cntrNoString = this.cntrNoString.replace('，', ',', this.cntrNoString);
          this.stockqueryForm.cntrNo = this.cntrNoString.split(',');
        }
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh (formName) {
        this.$refs[formName].resetFields();
        this.stockqueryForm.startInstoreDate = null;
        this.stockqueryForm.endInstoreDate = null;
        this.stockqueryForm.instoreNo = '';
        this.stockqueryForm.instoreDate = '';
        this.stockqueryForm.ownerName = '';
        this.stockqueryForm.cntrNoString = '';
        this.stockqueryForm.storageId = '';
        this.stockqueryForm.goodsName = '';
        this.stockqueryForm.storageName = '';
        this.stockqueryForm.productDate = '';
        this.stockqueryForm.startProductDate = '';
        this.stockqueryForm.endProductDate = '';
        this.cntrNoString = '';
        this.queryDataFn();
      },
      // 导出数据
      exportData() {
        this.exportFile({type: 'POST',
          url: '/maliwms/instore/exportInstoreHistory',
          data: this.stockqueryForm,
          loading: true,
          fileNameStart: '入库历史'
        });
      }
    }
  };
</script>
